<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式</title>
    <!-- 在外部引入的script中,标签体不能存在函数 -->
<!--    <script type="text/javascript" src="fn.js">-->
<!--        function f2(){-->
<!--            console.log("测试");-->
<!--        }-->
<!--    </script>-->
    <!--
        在引入外部js的script标签中,不能自行关闭标签,必须存在开始标签与结束标签
     -->
    <script type="text/javascript" src="fn.js"></script>
    <script>
        // 语法:function 函数名(){方法体}
        function f1(){
            // 在控制台打印数据,相当于Java中的System.out.print()
            // 此处的控制台是浏览器控制台,通过F12打开控制台
            console.log("Hello JavaScript");
        }
        function f2(){
            console.log("测试");
        }
    </script>
</head>
<body>
<!--
    在元素上,都存在事件句柄的属性
    事件句柄:在元素上执行的操作,例如:点击、双击、输入、获取焦点、失去焦点、鼠标悬停等
    语法:事件句柄="javascript:事件处理代码;"
-->
<button onclick="javascript:alert('Hello World');">简短缩写方式</button><br>
<!--
    可以在当前页面中通过script标签表示js代码区域
    在script标签体中编写js函数
    在元素上可以通过事件句柄="函数名()"表示调用指定的js函数
-->
<button onclick="f1()">内部方式</button><br>
<!--
    在js中,也可以引入外部的js文件,外部文件的名字必须是*.js
    在当前页面中通过script标签进行引入
-->
<button onclick="fn()">外部引入</button><br>
<button onclick="f2()">测试</button>
</body>
</html>